import React, { useEffect, useState } from 'react'

import { useNode, useEditor } from '@craftjs/core'

interface TextProps {
  id: string
  className: string
  key: string
  text: string
}
interface TextInterface extends React.FC<TextProps> {
  craft: object
}

const Text: TextInterface = (props) => {
  const { node, connectors, actions } = useNode((node) => ({ node }))
  const { enabled } = useEditor((state) => ({ enabled: state.options.enabled }))

  const [textEdit, setTextEdit] = useState(node.data.props[props.id]?.text ?? props.text)
  const [textPreview, setTextPreview] = useState(textEdit)

  const onChange = (e: any) => {
    actions.setProp((prop: any) => {
      if (!prop[props.id]) prop[props.id] = {}
      prop[props.id].text = e.target.innerText
      setTextPreview(e.target.innerText)
    }, 500)
  }
  const onClick = (e: any) => {
    if (enabled) {
      e.preventDefault()
      e.stopPropagation()
    }
  }

  useEffect(() => {
    setTextEdit(node.data.props[props.id]?.text ?? props.text)
  }, [enabled])

  return enabled ? (
    <span
      ref={(ref) => connectors.connect(ref as HTMLElement)}
      contentEditable
      suppressContentEditableWarning={true}
      className={props.className}
      onClick={onClick}
      onInput={onChange}
    >
      {textEdit}
    </span>
  ) : (
    <span className={props.className}>{textPreview}</span>
  )
}

export { Text }

Text.craft = {
  displayName: 'Text',
  props: {
    text: '',
  },
  related: {},
}
